<template>
    <div>
        <el-table default-expand-all :data="store.getters['goods/getList']" border style="width: 100%"
            :tree-props="{ children: 'children' }" row-key="id">
            <el-table-column prop="id" label="商品编号" width="100" />
            <el-table-column prop="goodsname" label="商品名称" width="100" />
            <el-table-column prop="price" label="商品价格" width="100" />
            <el-table-column prop="market_price" label="市场价格" width="100" />
            <el-table-column label="图片" width="180">
                <template v-slot="item">
                    <div>
                        <img width="100px" class="imgUrl" v-if="item.row.img" :src="item.row.img">
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="status" label="是否新品">
                <template v-slot="item">
                    <el-button v-if="item.row.isnew == 1" type="success" size="small">是</el-button>
                    <el-button v-else type="danger" size="small">否</el-button>
                </template>
            </el-table-column>

            <el-table-column prop="status" label="是否热卖">
                <template v-slot="item">
                    <el-button v-if="item.row.ishot == 1" type="success" size="small">是</el-button>
                    <el-button v-else type="danger" size="small">否</el-button>
                </template>
            </el-table-column>

            <el-table-column prop="status" label="状态">
                <template v-slot="item">
                    <el-button v-if="item.row.status == 1" type="success" size="small">启用</el-button>
                    <el-button v-else type="danger" size="small">禁用</el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180">
                <template v-slot="item">
                    <el-button type="primary" size="small" :icon="Edit" @click="edit(item.row.id)">编辑</el-button>
                    <el-button type="danger" size="small" :icon="Delete" @click="del(item.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination class="page" :page-size="store.getters['goods/getPagesize']" background layout="prev, pager, next"
            :total="store.getters['goods/getCount']" @current-change="changePage">
        </el-pagination>
    </div>
</template>
<script lang="ts" setup>
//引入icon图标
import {
    Delete,
    Edit,
    Download, Plus, ZoomIn
} from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { defineEmits } from 'vue'
import { goodsdelete } from '../../request/api'
import { ElMessage, ElMessageBox } from 'element-plus'
let store = useStore()
//获取列表
// let getList = () => {
store.dispatch('goods/getgoodslist')//获取列表
store.dispatch('cate/getCatelistActions')//分类
store.dispatch('specs/getSpecsListActions')//规格

store.dispatch('goods/getcount')//获取总条数
store.dispatch('goods/changePage', 1)//更新页码
// }
// getList()
//删除
let del = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除该条数据吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            goodsdelete({ id }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: res.msg,
                    })
                    //调用列表
                    // getList()//这个不用做删除判断
                    store.dispatch('goods/getgoodslist')//获取列表
                    store.dispatch('goods/getcount')//获取总条数

                    // store.dispatch('specs/getSpecsListActions')//规格
                    //获取列表
                }
            }).catch(err => {
                console.log(err);
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })

}
//修改
let emit = defineEmits(['edit'])
let edit = (id: any) => {
    emit('edit', id)
}
//切换页码
let changePage = (e: any) => {
    // console.log(e);
    store.dispatch('goods/changePage', e)
}
</script>
<style lang="less">
.el-pagination {
    float: right;
    margin: 10px;
}

.imgUrl {
    width: 90px;
    height: 90px;
}
</style>